<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <input type="radio" value="page1" v-model="page"/>页面1
        <input type="radio" value="page2" v-model="page"/>页面2
        <!--<div>{{page}}</div>-->
        <!--
            component是一个特殊的标签，通过is属性来指定要渲染的组件名称
        -->
        <component :is="page"></component>
    </div>

<script>
    const {createApp,ref} = Vue
    const app = createApp({
        setup() {
            const page = ref("page1")
            return {page}
        }
    })

    // 组件1
    const page1 = {
        template: `<div style="color:red;">页面组件1</div>`
    }
    // 组件2
    const page2 = {
        template: `<div style="color:blue;">页面组件2</div>`
    }
    app.component("page1",page1)
    app.component("page2",page2)

    app.mount("#app")
</script>
</body>
</html>